<template>
	<view class="contain">
		<!-- 选择器 -->
		<radio-group @change="radioCheckedChange" class="report_type">
			<label :class="radioCheckVal==0?'select_type':'no_type'">
				<view class="type_text">月报</view>
				<radio value="0" hidden="true" checked></radio>
			</label>
			<label :class="radioCheckVal==1?'select_type':'no_type'">
				<view class="type_text">年报</view>
				<radio value="1" hidden="true"></radio>
			</label>
		</radio-group>
		<!-- 数据图 -->
		<view class="data_detail">
			<view class="data_contain">
				<!-- 月报内容 -->
				<view :hidden="radioCheckVal!=0">
					<!-- 时间 -->
					<view class="data_time">
						<image class="date_icon" src="../../static/pre.png" @click="toLastmonth"></image>
						<picker mode="date" :value="date" fields="month" start="2018-09-01" end="2021-09-01" @change="bindDateChange">
							<view class="picker">
								{{date[0]}}{{date[1]}}
							</view>
						</picker>
						<image class="date_icon" src="../../static/next.png" @click="toNextmonth"></image>
					</view>
					<!-- 数据日期 -->
					<view class="data_tip">注：更新于{{date[1]}}{{date[2]}}</view>
					<!-- 月收入 -->
					<view class="qiun-charts">
						<canvas canvas-id="income" id="income" class="charts-pie" @touchstart="touchPie"></canvas>
					</view>
					<view class="charts-title">月收入</view>
					<view class="divider"></view>
					<!-- 月支出 -->
					<view class="qiun-charts">
						<canvas canvas-id="spending" id="spending" class="charts-pie" @touchstart="touchPie"></canvas>
					</view>
					<view class="charts-title">月支出</view>
					<view class="divider"></view>
					<!-- 总数据 -->
					<view class="data_all">
						<view>
							<view>￥{{billList[date[1]].income.price ? tools.sub(billList[date[1]].income.price) : 0}}</view>
							<view class="data_text">月收入</view>
						</view>
						<view class="longitudinal"></view>
						<view>
							<view>￥{{billList[date[1]].spendding.price ? tools.sub(billList[date[1]].spendding.price) : 0}}</view>
							<view class="data_text">月支出</view>
						</view>
						<view class="longitudinal"></view>
						<view>
							<view>￥{{billList[date[1]].income.price - billList[date[1]].spendding.price ? tools.sub(billList[date[1]].income.price - billList[date[1]].spendding.price) : 0}}</view>
							<view class="data_text">收支差额</view>
						</view>
					</view>
				</view>
				<!-- 年报内容 -->
				<view :hidden="radioCheckVal!=1">
					<!-- 时间 -->
					<view class="data_time">
						<image class="date_icon" src="../../static/pre.png" @click="toLastYear"></image>
						<picker mode="date" :value="dateYear" fields="year" start="2018-09-01" end="2021-09-01" @change="bindDateChange">
							<view class="picker">
								{{dateYear}}
							</view>
						</picker>
						<image class="date_icon" src="../../static/next.png" @click="toNextYear"></image>
					</view>
					<!-- 数据日期 -->
					<view class="data_tip">注：更新于{{date[1]}}{{date[2]}}</view>
					<view class="qiun-charts">
						<canvas canvas-id="incom_year" id="incom_year" class="charts-pie" @touchstart="touchColumn"></canvas>
					</view>
					<view class="divider"></view>
					<view class="qiun-charts">
						<canvas canvas-id="spending_year" id="spending_year" class="charts-pie" @touchstart="touchColumn"></canvas>
					</view>
					<view class="divider"></view>
					<view class="data_all">
						<view>
							<view>￥{{billList.income ? tools.sub(billList.income) : 0}}</view>
							<view class="data_text">年收入</view>
						</view>
						<view class="longitudinal"></view>
						<view>
							<view>￥{{billList.spendding ? tools.sub(billList.spendding) : 0}}</view>
							<view class="data_text">年支出</view>
						</view>
						<view class="longitudinal"></view>
						<view>
							<view>￥{{billList.income - billList.spendding ? tools.sub(billList.income - billList.spendding) : 0}}</view>
							<view class="data_text">收支差额</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 机构信息 -->
		<view class="institution_info">
			<form class="institution_contain" @submit="submit">
				<view class="institution_title">
					<view>{{institution}}</view>
					<button class="editor_btn" @click="editor" v-if="!editor_content">编辑</button>
					<button class="editor_btn" v-else form-type="submit">保存</button>
				</view>
				<view class="institution_detail">
					<image :src="avatarUrl" style="width: 180rpx;border-radius: 50%;margin-right: 20rpx;" mode="widthFix"></image>
					<view style="margin-left: 10rpx; width: 400rpx;">
						<!-- 简介 -->
						<textarea v-if="editor_content" name="content" :value="content" class="introduction"></textarea>
						<view v-else>{{insIntroduction}}</view>
						<!-- 联系方式 -->
						<input v-if="editor_content" name="contact" :value="contact" class="contact"/>
						<view v-else style="margin-top: 30rpx;">{{phone}}</view>
						<!-- 营业时间 -->
						<input v-if="editor_content" name="time" :value="time" style="margin-top: 5rpx;" class="contact"/>
						<view v-else>{{time}}</view>
					</view>
				</view>
				<!-- 添加图片 -->
				<view class="addImg" @click="addImg">
					<image src="../../static/add.png"></image>
					<view>添加图片</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-view">
					<image v-for="(item,index) in imageUrl" :key="index" :src="item" class="institution_img" mode="heightFix" @click="previewImg(item)"></image>
				</scroll-view>
				<view class="institution_teacher" v-if="teacherList.length > 0">
					<view class="teacher_title">任教老师</view>
					<!-- 遍历老师 -->
					<view class="teacher_detail" v-for="(item, index) in teacherList" :key="index">
						<image style="width: 100rpx;margin-right: 30rpx;border-radius: 50%;" mode="widthFix" :src="item.avatarUrl"></image>
						<view class="teacher_info">
							<view class="teacher_name">{{item.realName}}</view>
							<!-- <view class="teacher_describe">授课十年，毕业于东莞理工学院音乐系，获优秀青年音乐奖、大学生创业资深导师奖、青有你创造营精英。</view> -->
							<view class="teacher_describe">
								<view v-for="(param, index) in item.classList" :key="index">
									{{param.name}}
									<text v-if="index < item.classList.length - 1">、</text>
								</view> 
							</view>
							<view class="divider"></view>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts/u-charts.js';
	import dateUtil from '../../util/dateUtil.js';
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	var _self, _openid, _id;
	var canvaPie = [];
	var canvaColumn = [];
	var index = 0; 

	export default {
		data() {
			return {
				radioCheckVal: 0,
				billList: [],
				date: '2021年03月',
				dateYear: '2021年',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				piearr: [],
				imageUrl: [],
				editor_content: false,
				avatarUrl: '',
				institution: '',
				insIntroduction: '快学音乐成立于xx年xx月……',
				phone: '13788888888',
				time: '9:30AM - 8:00PM',
				tempFilePaths: '',
				fileList: '',
				bufferList: '',
				teacherList: []
			}
		},
		onLoad() {
			_openid = getApp().globalData.userInfo._openid;
			_id = getApp().globalData.userInfo._id;
			_self = this;
			this.cWidth = uni.upx2px(580);
			this.cHeight = uni.upx2px(400);
			this.date = dateUtil.getFullDate(new Date());
			this.dateYear = new Date().getFullYear() + '年';
			this.getBillList();
			// 获取老师
			this.getTeacher();
		},
		methods: {
			// 获取老师
			getTeacher: function() {
				// 获取所有老师
				db.collection('user').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					// type: '教师'
				}).get().then(res=>{
					// console.log(res);
					// _self.teacherList = res.data;
					// 获取老师的班级
					res.data.forEach(item=>{
						// 获取机构的班级
						db.collection('class').where({
							institutionId: getApp().globalData.userInfo.institutionId,
							teacher: item.openId
						}).get().then(res=>{
							// console.log(res.data); 
							if(res.data.length > 0){
								item.classList = res.data;
								_self.insert(_self.teacherList, item);
							}
						})
					})
				})
			},
			insert: function(arr, param){
				let flag = false;
				// 遍历数组，判断该元素是否存在
				arr.forEach(item => {
					if(item._id == param._id) {
						// 存在
						flag = true;
					}
				})
				if(!flag) {
					// 不存在则保存
					_self.teacherList.push(param);
				}
			},
			// 读取账单
			getBillList: function(){
				// 获取月份
				let date = _self.date;
				// 读取该机构的账单
				db.collection('user').where({
						_id
					}).get().then(res=>{
						console.log(res.data[0]);
						_self.institution = res.data[0].institution;
						_self.insIntroduction = res.data[0].insIntroduction;
						_self.phone = res.data[0].phone;
						_self.avatarUrl = res.data[0].avatarUrl;
						_self.imageUrl = res.data[0].fileList;
						if(res.data[0].billList){
							_self.billList = res.data[0].billList[date[0]];
							console.log(_self.billList);
							_self.getMonthData();
						}
					})
			},
			// 改变月报和年报
			radioCheckedChange: function(e) {
				console.log('改变选中');
				this.radioCheckVal = e.target.value;
				if(e.target.value == 1) this.getYearData();
				else this.getMonthData();		
			},
			// 获取月报数据
			getMonthData: function() {
				let date = _self.date;
				let billIncome = _self.billList[date[1]].income;
				let billSpendding = _self.billList[date[1]].spendding;
				let incomeType = ['乐器收入', '活动收入', '其他收入', '课程收入'];
				let spenddingType = ['培训费', '乐器采购', '其他', '财务费用', '地租', '水电费', '工资发放', '广告费用', '其他', '活动费用', '招生提成', '活动费用', '老师课酬']
				var income = {
					"series": []
				};
				var spending = {
					"series": []
				}
				incomeType.forEach(item=>{
					if(billIncome[item] != null  && billIncome[item] > 0){
						income.series.push({
							"name": item + '：' + billIncome[item],
							"data": billIncome[item],
						})
					}
				});
				spenddingType.forEach(item=>{
					if(billSpendding[item] != null && billSpendding[item] > 0){
						spending.series.push({
							"name": item + '：' + billSpendding[item],
							"data": billSpendding[item],
						})
					}
				});
				_self.showPie("income", income);
				_self.showPie("spending", spending);
			},
			// 获取年报数据
			getYearData: function() {
				let bill = _self.billList;
				let date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				var incom_year = {
					"categories": ["一月", "二月", "三月", "四月", "五月", "六月"],
					"series": [{
						"name": "收入",
						"data": [],
						"color": "#ffdcbe",
						"textColor": "#FD973F"
					}, {
						"name": "支出",
						"data": [],
						"color": "#FD973F",
						"textColor": "#FD973F"
					}]
				}
				var spending_year = {
					"categories": ["七月", "八月", "九月", "十月", "十一月", "十二月"],
					"series": [{
						"name": "收入",
						"data": [],
						"color": "#ffdcbe",
						"textColor": "#FD973F"
					}, {
						"name": "支出",
						"data": [],
						"color": "#FD973F",
						"textColor": "#FD973F"
					}]
				}
				// 收入
				for(let i = 0; i < date.length; i++){
					if(i < 7){
						// 1到6月的收入
						if(bill[date[i]] != null){
							incom_year.series[0].data.push(bill[date[i]].income.price)
						}else{
							incom_year.series[0].data.push(0)
						}
					}else{
						// 7到12月的收入
						if(bill[date[i]] != null){
							spending_year.series[0].data.push(bill[date[i]].income.price)
						}else{
							spending_year.series[0].data.push(0)
						}
					}
				}
				// 支出
				for(let i = 0; i < date.length; i++){
					if(i < 7){
						if(bill[date[i]] != null){
							incom_year.series[1].data.push(bill[date[i]].spendding.price)
						}else{
							incom_year.series[1].data.push(0)
						}
					}else{
						if(bill[date[i]] != null){
							spending_year.series[1].data.push(bill[date[i]].spendding.price)
						}else{
							spending_year.series[1].data.push(0)
						}
					}
				}
				_self.showColumn("incom_year", incom_year);
				_self.showColumn("spending_year", spending_year);
			},
			// 绘制饼状图
			showPie: function(canvasId, chartData) {
				canvaPie[index++] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 12,
					legend: {
						show: true,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1,
						fontColor: '#FD973F',

					},
					background: '#FFFFFF',
					color: '#efefef',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					extra: {
						pie: {
							labelWidth: 15
						}
					},
				});
				if(index == 2) index = 0;
			},
			// 绘制柱状图
			showColumn: function(canvasId, chartData) {
				canvaColumn[index++] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					duration: 600,
					type: 'column',
					legend: {
						position: 'top',
						float: 'right',
						itemGap: 10,
						padding: 20,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1,
						fontColor: '#FD973F',
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						fontColor: '#FD973F'
					},
					yAxis: {
						disableGrid: true,
						disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			// 饼状图点击效果
			touchPie: function(e){
				var type = e.target.id;
				if(type == 'income') index = 0;
				else index = 1;
				canvaPie[index].showToolTip(e, {
					format: function (item) {
						return item.name.split("：")[0] + ':' + item.data 
					}
				});
			},
			// 柱状图点击效果
			touchColumn: function(e){
				var type = e.target.id;
				if(type == 'incom_year') index = 0;
				else index = 1;
				canvaColumn[index].showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},
			// 预览图片
			previewImg: function(e){
				uni.previewImage({
					current: e,
					urls: this.imgSrc
				})
			},
			// 时间选择器
			bindDateChange: function(e) {
				this.date = dateUtil.getFullDate(e.detail.value);
				this.dateYear = e.detail.value + '年';
				// 重新设置图形数据
				var index = this.radioCheckVal;
				if(index == 0) this.getMonthData();
				else this.getYearData();
			},
			// 查看上一个月
			toLastmonth: function(){
				var date = new Date(dateUtil.toDate(this.date[0] + this.date[1]));
				var lastDate = new Date(date.getTime() - 1000*3600*24*28);
				this.date = dateUtil.getFullDate(lastDate);
				_self.getMonthImg();
			},
			// 查看下一个月
			toNextmonth: function(){
				var date = new Date(dateUtil.toDate(this.date[0] + this.date[1]));
				var nextDate = new Date(date.getTime() + 1000*3600*24*31);
				if(nextDate.getTime() <= new Date().getTime()){
					this.date = dateUtil.getFullDate(nextDate);
					// 重新设置图形数据
					_self.getMonthImg();
				}
			},
			// 重新获取月报图形
			getMonthImg: function(){
				db.collection('user').where({
					_id
				}).field({"billList": true}).get().then(res=>{
					if(res.data[0].billList){
						if(res.data[0].billList[_self.date[0]][_self.date[1]]){
							_self.billList = res.data[0].billList[_self.date[0]];
							_self.getMonthData();
						}else{
							var income = {"series": []};
							var spending = {"series": []};
							_self.showPie("income", income);
							_self.showPie("spending", spending);
						}
					}
				})
			},
			// 编辑按钮
			editor: function(){
				this.editor_content = true;
			},
			// 保存按钮
			submit: function(e){
				var res = e.detail.value;
				// 保存数据
				this.content = res.content;
				this.contact = res.contact;
				this.time = res.time;
				// 隐藏保存按钮
				this.editor_content = false;
				uni.showToast({
					icon: "success",
					title: "保存成功",
					duration: 1000
				})
			},
			// 添加图片
			addImg: function(){
				let that = this;
				that.bufferList = [];
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						console.log('uploadImage:')
						console.log(res);
						that.tempFilePaths = res.tempFilePaths;
						that.fileList = [];
				
						for (let key in that.tempFilePaths) {
				
							that.setFileList(key, res.tempFilePaths.length);
				
						}
					}
				})
			},
			setFileList: function(key, length) {
				let that = this;
				let _key = parseInt(key);
				let _length = length;
				console.log(_key, _length);
				let str = that.randomString(3);
				cloudbase.uploadFile({
					cloudPath: "institutionImage/" + that.institutionId + "/" + str +
						".png",
					filePath: that.tempFilePaths[key],
					onUploadProgress: function(progressEvent) {
						let percentCompleted = Math.round((progressEvent.loaded *
							100) / progressEvent.total);
					}
				}).then(result => {
					// console.log(result)
					let i = new Object();
			
					i = result.fileID;
					that.bufferList.push(i);
					if (_key === _length - 1) {
						// console.log('ok')
						that.updateFile(that.bufferList);
					}
				})
			},
			randomString: function(e) {
				e = e || 32;
				let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
				let a = t.length;
				let n = "";
				for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
				return n
			},
			updateFile: function(fileList) {
				console.log(fileList);
				cloudbase.database().collection('user').where({
					_id
				}).update({
					fileList: dbCmd.push(fileList)
				}).then(res => {
					console.log(res);
					if (res.updated == 1) {
						uni.showToast({
							title: '上传成功'
						})
						_self.imageUrl.push(fileList)
					}
				})
			},
			// 查看上一年
			toLastYear: function(){
				var date = this.dateYear.split("年")[0];
				var lastDate = date*1 - 1;
				this.dateYear = lastDate + '年';
				// 重新设置图形数据
				_self.getYearImg();
			},
			// 查看下一年
			toNextYear: function(){
				var date = this.dateYear.split("年")[0];
				var lastDate = date*1 + 1;
				if(new Date(lastDate+'-1-1').getTime() <= new Date().getTime()){
					this.dateYear = lastDate + '年';
					// 重新设置图形数据
					_self.getYearImg();
				}
			},
			// 重新获取年报图形
			getYearImg: function(){
				db.collection('user').where({
					_id
				}).field({"billList": true}).get().then(res=>{
					if(res.data[0].billList){
						if(res.data[0].billList[_self.dateYear]){
							_self.billList = res.data[0].billList[_self.dateYear];
							_self.getYearData();
						}else{
							var incom_year = {
								"categories": ["一月", "二月", "三月", "四月", "五月", "六月"],
								"series": [{
									"name": "收入",
									"data": [],
									"color": "#ffdcbe",
									"textColor": "#FD973F"
								}, {
									"name": "支出",
									"data": [],
									"color": "#FD973F",
									"textColor": "#FD973F"
								}]
							}
							var spending_year = {
								"categories": ["七月", "八月", "九月", "十月", "十一月", "十二月"],
								"series": [{
									"name": "收入",
									"data": [],
									"color": "#ffdcbe",
									"textColor": "#FD973F"
								}, {
									"name": "支出",
									"data": [],
									"color": "#FD973F",
									"textColor": "#FD973F"
								}]
							}
							_self.showColumn("incom_year", incom_year);
							_self.showColumn("spending_year", spending_year);
						}
					}
				})
			},
		}
	}
</script>

<script module="tools" lang="wxs">
	function sub(val) {
		if(!val) return;
		val = val.toString();
		if(val.indexOf(".") == -1) return val;
		return val.substring(0,val.indexOf(".")+3);
	}
	module.exports = {
		sub: sub
	}
</script>

<style>
	page {
		background-color: #F3F5F7;
	}

	.contain {
		margin: 10rpx 30rpx;
	}

	.report_type {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.select_type {
		margin: 0rpx 20rpx;
		color: #FD973F;
		border-bottom: solid 3px #FD973F;
		width: 50%;
	}

	.no_type {
		margin: 0rpx 20rpx;
		width: 50%;
	}

	.type_text {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 数据报表 */
	.data_detail {
		margin-top: 15rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
	}

	.data_contain {
		margin: 30rpx 30rpx;
	}

	.data_time {
		display: flex;
		justify-content: space-between;
		color: #777;
	}

	.data_tip {
		font-size: 22rpx;
		color: #FD973F;
		position: absolute;
		right: 70rpx;
		margin-top: 20rpx;
		z-index: 999;
	}

	.date_icon {
		width: 50rpx;
		height: 50rpx;
	}

	.divider {
		height: 1rpx;
		width: 100%;
		background-color: #eee;
		margin: 20rpx 0;
	}

	.data_all {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
	}

	.data_text {
		font-size: 25rpx;
		color: #999;
		margin-top: 15rpx;
	}

	.longitudinal {
		height: 100rpx;
		margin: -15rpx 0;
		width: 2rpx;
		background-color: #eee;
	}

	/* 机构信息 */
	.institution_info {
		margin-top: 25rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
	}

	.institution_contain {
		margin: 40rpx 40rpx;
	}

	.institution_title {
		display: flex;
		font-size: 38rpx;
		justify-content: space-between;
	}

	.editor_btn {
		height: 50rpx;
		background-color: #FD973F;
		font-size: 22rpx;
		color: #FFFFFF;
		border-radius: 18rpx;
		margin-right: 0;
		line-height: 50rpx;
	}

	.institution_detail {
		margin-top: 20rpx;
		display: flex;
		color: #999;
		font-size: 26rpx;
	}

	.institution_teacher {
		display: flex;
		flex-direction: column;
	}

	.teacher_detail {
		display: flex;
		flex-direction: row;
	}

	.teacher_title {
		font-size: 36rpx;
		margin: 30rpx 0;
		color: #666;
	}

	.teacher_name {
		font-size: 30rpx;
		margin-bottom: 15rpx;
		color: #666;
	}

	.teacher_info {
		display: flex;
		flex-direction: column;
		width: calc(100% - 150rpx);
	}

	.teacher_describe {
		font-size: 26rpx;
		color: #999;
		margin-bottom: -10rpx;
		display: flex;
	}
	
	/* 添加图片 */
	.addImg{
		display: flex;
		flex-direction: row;
		color: #FD973F;
		font-size: 26rpx;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	.addImg image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	/* 显示图片 */
	.scroll-view {
		white-space: nowrap;
		width: 100%;
		margin-top: 30rpx;
	}

	.institution_img {
		height: 260rpx;
		margin-right: 10rpx;
		white-space: nowrap;
	}

	/* 饼状图 */
	.qiun-charts {
		width: 580rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row !important;
	}

	.charts-pie {
		width: 580rpx;
		height: 400rpx;
		background-color: #FFFFFF;
	}
	
	.charts-title {
		font-size: 25rpx;
		color: #999;
		margin-left: 130rpx;
		margin-top: -20rpx;
		position: absolute;
		z-index: 999;
	}
	
	.introduction{
		width: 360rpx;
		height: 120rpx;
		border: solid 1px #999;
		border-radius: 16rpx;
		padding: 15rpx 20rpx;
		line-height: 50rpx;
	}
	
	.contact{
		margin-top: 20rpx;
		width: 240rpx;
		border: solid 1px #999;
		border-radius: 16rpx;
		padding: 5rpx 20rpx;
	}
</style>
